<div id="Laborales" class="ajaxified">
    <div id="lista-datos-laborales">
        <table class="normal" id="tabla-datos-laborales">
            <thead>
                <tr>
                    <th>Empresa</th>
                    <th>Sector</th>
                    <th>Naturaleza</th>
                    <th>Lugar</th>
                    <th>Cargo</th>
                    <th>Tel&eacute;fono</th>
                    <th>Fecha de ingreso</th>
                    <th style="width:200px;"></th>
                </tr>
            </thead>
            <tbody>
                {foreach $historialLaboral as $historial}
                <tr id="{$historial@index}">
                    <td>
                        <span class="nombre-empresa">{$historial->getDatosLaboral()->getNombreEmpresa()}</span>
                    </td>
                    <td>
                        <span class="sector-empresa" name="{$historial->getSector()}">
                            {if array_key_exists($historial->getSector(), $sectores)}
                                {$sectores[$historial->getSector()]}
                            {else}
                                {$sectores[1]}
                            {/if}
                        </span>
                    </td>
                    <td>
                        <span class="naturaleza-empresa" name="{$historial->getNaturaleza()}">{$naturalezas[$historial->getNaturaleza()]}</span>
                    </td>
                    <td>
                        <span class="direccion-empresa">{$historial->getDatosLaboral()->getDatosEmpresa()->getDireccion()}</span> -
                        <span class="ciudad-empresa">{$historial->getDatosLaboral()->getDatosEmpresa()->getMunicipio()->getNombre()}</span>
                        {if $historial->getPais()}(<span class="pais-empresa" name="{$historial->getPais()->getCodigoPais()}" >{$historial->getPais()->getNombre()}</span> ){/if}

                    </td>
                    <td>
                        <span class="cargo-empresa">{$historial->getOcupacion()}</span>
                    </td>
                    <td>
                        <span class="telefono-empresa">{$historial->getDatosLaboral()->getDatosEmpresa()->getTelefono()}</span>
                    </td>
                    <td>
                        <span class="fecha-empresa">{$historial->getFechaIngreso()|json_to_date:"d-M-Y"}</span>
                    </td>
                    <td>
                        <button
                           id="{$historial@index}"
                           name="CodigoInterno={$historial->getHistorialLaboralPk()->getCodigoInterno()}&Secuencia={$historial->getHistorialLaboralPk()->getSecuencia()}"
                           title="Actualizar los datos de este empleo."
                           class="edit-historial i_pencil icon small"> Editar
                        </button>
                        
                        <button 
                           name="{$deleteLaboral}&CodigoInterno={$historial->getHistorialLaboralPk()->getCodigoInterno()}&Secuencia={$historial->getHistorialLaboralPk()->getSecuencia()}"
                           title="Borrar este historial laboral"
                           class="delete-historial i_trashcan icon small"> Borrar
                        </button>
                    </td>
                </tr>
                {foreachelse}
                <tr>
                    <td colspan="8">
                        No se ha registrado informaci&oacute;n.
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>

    <form method="post" action="{$addLaboral}" id="datos-laborales" class="form-validate">
        <fieldset id="editor">
            <label id="add-historial"> Agregar Experiencia Laboral</label>
            <input type="hidden" name="CodigoInterno" value="{$student->getCodigoInterno()}"/>
            <dl>
            	<label>Nombre de la Empresa</label>
        		<div><input type="text" name="NombreEmpresa"/></div>
        	</dl>
                <dl>
                    <label>Pa&iacute;s</label>
                    <div>
                        <select name="PaisEmpresa">
                        {foreach $paises as $pais}
                            <option value="{$pais->getCodigoPais()}">
                                {$pais->getNombre()}
                            </option>
                        {/foreach}
                        </select>
                    </div>
                </dl>
                <dl>
                    <label>Ciudad</label>
                    <div><input type="text" name="Ciudad" /></div>
                </dl>
                <dl>
                    <label>Direcci&oacute;n</label>
                    <div><input type="text" name="Direccion"/></div>
                </dl>
                <dl>
                    <label>Tel&eacute;fono</label>
                    <div><input type="text" name="Telefono" /></div>
                </dl>
                <dl>
                    <label>Cargo</label>
                    <div><input type="text" name="Ocupacion" /></div>
                </dl>
                <dl>
                    <label>Fecha de Ingreso</label>
                    <div><input type="text" name="FechaIngreso" class="date datepicker text" /></div>
                </dl>
                <dl>
                    <label>Naturaleza de la Empresa:</label>
                    <div>
                        {html_options options=$naturalezas name="NaturalezaEmpresa"}
                    </div>
                </dl>
                <dl>
                    <label>Sector de la Empresa</label>
                    <div>
                        {html_options options=$sectores name="SectorEmpresa"}
                    </div>
                </dl>
                    <dl>
                    <label></label>
                    <div>
                        <button id="add-datos-button" class="i_plus icon small" >Guardar</button>
                        <button id="cancel-datos-button" class="i_exclamation icon small    " >Cancelar</button>
                    </div>
                </dl>
        </fieldset>
    </form>
</div>

<script type="text/javascript" >
    //URLs for adding and editing
    var add = "{$addLaboral}";
    var edit = "{$editLaboral}";
    var Delete = "{$deleteLaboral}";
    var plegable = "#datos-laborales #editor div";
    {literal}
jQuery.noConflict();
jQuery(document).ready(function($){
    $( ".datepicker" ).datepicker({
        dateFormat:"dd/mm/yy",
        changeMonth: true,
        changeYear: true
    });
    /**
     * Show Add/Edit form
     */
    jQuery("#add-historial").click(function(){
        $("#datos-laborales").attr("action", add);
    });


    jQuery(".edit-historial").live("click", function(){
        var name = this.name;
        var id = this.id;
        var row = jQuery("#" + id);
        //Copiar las caracteristicas del empleo que sera editado.
        var NombreEmpresa = row.find('.nombre-empresa').text();
        var Ciudad = row.find('.ciudad-empresa').text();
        var Direccion = row.find('.direccion-empresa').text();
        var Telefono = row.find('.telefono-empresa').text();
        var Ocupacion = row.find('.cargo-empresa').text();
        var FechaIngreso = row.find('.fecha-empresa').text();
        var SectorEmpresa = row.find(".sector-empresa").attr("name");
        var NaturalezaEmpresa = row.find(".naturaleza-empresa").attr("name");
        var PaisEmpresa = row.find(".pais-empresa").attr("name");
                
        var $form = jQuery("#datos-laborales");

        $form.find('input[name="NombreEmpresa"]').val(NombreEmpresa);
        $form.find('select[name="PaisEmpresa"]').val(PaisEmpresa);
        $form.find('input[name="Ciudad"]').val(Ciudad);
        $form.find('input[name="Direccion"]').val(Direccion);
        $form.find('input[name="Telefono"]').val(Telefono);
        $form.find('input[name="Ocupacion"]').val(Ocupacion);
        $form.find('input[name="FechaIngreso"]').val(FechaIngreso);
            
        $form.find('select[name="NaturalezaEmpresa"]').val(NaturalezaEmpresa);
        $form.find('select[name="SectorEmpresa"]').val(SectorEmpresa);

        var url = edit + "&" + name;
        $("#datos-laborales").attr("action", url);
        return false;
    });

    jQuery("#cancel-datos-button").click(function(){
        clearForm();
        return false;
    });

    function clearForm(){
        var $form = jQuery("#datos-laborales");
        $form.find('input[name="NombreEmpresa"]').val("");
        $form.find('input[name="Ciudad"]').val("");
        $form.find('input[name="Direccion"]').val("");
        $form.find('input[name="Telefono"]').val("");
        $form.find('input[name="Ocupacion"]').val("");
        $form.find('input[name="FechaIngreso"]').val("");
    }

    $("#datos-laborales").submit(function(){
        var url = $(this).attr("action") + "&ajax=true";
        var data = $(this).serialize();
        $.ajax({
          type: 'POST',
          url: url,
          data: data,
          success: function(result){
                $("#Laborales").parent().html(result);
            },
          beforeSend: beforeSend,
          cache: false
        });
        return false;
    });

    $(".delete-historial").click(function(){
        var url = $(this).attr("name") + "&ajax=true";

        $.ajax({
          url: url,
          success: function(result){
                $("#Laborales").parent().html(result);
            },
          beforeSend: beforeSend,
          cache: false
        });
        return false;
    });
});//lista-datos-laborales
    {/literal}
</script>